<template>
  增删改查的演示
  <hr>
  <!--查询控件-->
  <nf-find
    :findValue="findValue"
    :findArray="findArray"
    :active="active"
    :moduleId="moduleId"
    v-bind="findMeta"
  >
  </nf-find>
  <!--操作按钮-->
  <nf-button
    v-bind="buttonMeta"
    :componentKind="componentKind"
    :active="active"
    :moduleId="moduleId"
    :dataId="selection.dataId"
    :dataIds="selection.dataIds"
  >
  </nf-button>
  <!--列表控件-->
  <nf-grid
    v-grid-drag="gridMeta"
    :dataList="dataList"
    v-bind="gridMeta"
    :selection="selection"
  >
  </nf-grid>
  <!--分页-->
  <el-pagination
    background
    layout="prev, pager, next"
    v-model:currentPage="pageInfo.pageIndex"
    :total="pageInfo.count"
    :active="active"
  >
  </el-pagination>
 
</template>

<script>
  import { reactive, watch, onMounted, nextTick } from 'vue'
  import { ElPagination } from 'element-plus'
  import { createDataList, createModel, lifecycle } from '/nf-ui-core'
  import { loading } from '/nf-ui-elp'
  import { logTime } from '@naturefw/nf-tool'
  import _findMeta from '../find/find.json'
  import _buttonMeta from '../button/button.json'
  import _gridMeta from '../grid/grid.json'
  import _formMeta from '../form/form.json'
  import useActive from '../activation.js'

  import form from '../form/index.vue'
  import list from './index.vue'

</script>

<script setup>
  lifecycle('增删改查', true)
  // loading()

  const t = logTime('加载时间')

  nextTick(() => {
    // Loading should be closed asynchronously
    // t.end()
  })

  const moduleId = new Date().valueOf()

  // ================= 按钮部分 ===================
  const buttonMeta = reactive(_buttonMeta)

  buttonMeta.events = {
    deleteClick: (id, meta) => {
      // console.log('按了删除按钮：', id, meta)
      return true
    }
  }
  
  // 弹窗打开的组件的字典
  const componentKind = {
    form,
    list
  }
  const { active } = useActive(moduleId)

  // ================= 查询部分 ===================
  
  // 获取表单控件需要的meta
  const findMeta = reactive(_findMeta)
  // 改为插槽
  // formMeta.itemMeta[101].controlType = 1

  // 根据 meta 创建表单的 model
  const findValue = reactive({})
  const findArray = reactive([])

  // ================= 表单部分 ===================

  // 获取表单控件需要的meta
  const formMeta = reactive(_formMeta)
  // 改为插槽
  // formMeta.itemMeta[101].controlType = 1

  // 根据 meta 创建表单的 model
  const model = createModel(formMeta.itemMeta, formMeta.colOrder)

  const addNew = () => {
    const a = {}
    Object.assign(a, model)
    dataList.unshift(a)
  }
  // ================= 列表部分 ===================

  // 获取表单控件需要的meta
  const gridMeta = reactive(_gridMeta)
  // 改为插槽
  // formMeta.itemMeta[101].controlType = 1

  // 分页信息
  const pageInfo = reactive({
    pageSize: 10,
    count: 20, // 总数
    pageIndex: 1 // 当前页号
  })
  
  const selection = reactive({
    dataId: '', // 单选ID number 、string
    row: {}, // 单选的数据对象 {}
    dataIds: [], // 多选ID []
    rows: [] // 多选的数据对象 []
  })
  
  // 根据 meta 创建表单的 model
  const _dataList = createDataList(_formMeta.itemMeta, pageInfo.count).reverse()
  // 绑定控件的列表
  const dataList = reactive([])
  // 监听页号，设置列表数据
  watch(() => pageInfo.pageIndex, (index) => {
    // console.log(index)
    dataList.length = 0
    const cpp = (pageInfo.pageIndex - 1) * pageInfo.pageSize
    for(let i=0; i< pageInfo.pageSize; i++) {
      dataList.push(_dataList[cpp + i])
    }
  }, {immediate:true})

</script>